<script setup>
import {ref, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {router} from "@/router/index.js";

const dialogVisible=ref(false)
const handleClose =()=>{
  dialogVisible.value=false
  remarkContent.value=''
  emits("dialogVisible",dialogVisible.value)
}
const remarkContent=ref('')
const id=ref()
const submitRemark =()=>{
  axios.post(`/audit/reject/${id.value}`,remarkContent.value).then(resp=>{
    ElMessage.error(resp.data);
    router.push('/audit')
  })
}
const props=defineProps({
  visible:{
    type:Boolean,
    required:false,
    default:false
  },
  id:{
    type:Number,
    required:true
  }
})

watch(()=>props.visible,(newValue)=>{
  dialogVisible.value=newValue;
})
watch(()=>props.id,(newValue)=>{
  id.value=parseInt(newValue,10);
})
const emits=defineEmits("")
</script>

<template>
  <div>
    <!-- 审核备注弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="审核备注"
        width="50%"
        :before-close="handleClose"
    >
      <!-- 备注输入框 -->
      <el-input
          v-model="remarkContent"
          type="textarea"
          :rows="6"
      />

      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRemark">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>